<div class="controls">
  <button type="button" class="btn">
    <i class="fa fa-backward" aria-hidden="true" (click)="speedDown()"></i>
  </button>
  <button type="button" class="btn" (click)="speedUp()">
    <i class="fa fa-forward" aria-hidden="true"></i>
  </button>
  <button type="button" class="btn" (click)="restart()">
    <i class="fa fa-repeat" aria-hidden="true"></i>
  </button>

  {{"Speed"| translate}}: {{speed}}
  <span id="user" style="padding-left: 20px" *ngIf="replay.user">{{"user"| translate}} : {{replay.user}}</span>
  <span id="asset" style="padding-left: 20px" *ngIf="replay.asset">{{"asset"| translate}} : {{replay.asset}}</span>
  <span id="system_user" style="padding-left: 20px" *ngIf="replay.system_user">{{"system user"| translate}} : {{replay.system_user}}</span>
  <span id="date_start" style="padding-left: 20px" *ngIf="replay.date_start">{{"start time"| translate}} : {{startTime}} </span>
  <span id="download" style="padding-left: 30px" *ngIf="replay.download_url"><a type="button" [href]="replay.download_url">{{"download"| translate}}</a></span>
</div>
<div id="player">
  <as-split direction="horizontal" gutterSize="0">
    <as-split-area *ngIf="commands.length" [size]="15" [maxSize]="15" [minSize]="0" order="0">
      <div class="command-results" 
            infiniteScroll
            [infiniteScrollDistance]="2"
            [infiniteScrollThrottle]="50"
            (scrolled)="onScroll()"
            [scrollWindow]="false">
          <div class="item" *ngFor="let item of commands" (click)="commandClick(item)"> 
            <div class="command" [title]="item.input">{{ item.input }}</div>
            <div class="timestamp">{{ item.atime }}</div>
          </div>
      </div>
    </as-split-area>
    <as-split-area [size]="85" [maxSize]="100" [minSize]="85" order="1">
        <div id="screen"></div>
    </as-split-area>
  </as-split>
</div>




